<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>信息管理页</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="static/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="static/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="static/jquery.min.js"></script>
<script src="static/bootstrap/bootstrap.min.js"></script>
<script src="static/bootstrap-table/bootstrap-table.min.js"></script>
<script src="static/bootstrap-table/bootstrap-table-export.min.js"></script>
<script src="static/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="static/tableExport.js"></script>
<script src="static/echarts.min.js"></script>
<script src="static/bootbox.min.js"></script>
<script src="static/moment.min.js"></script>
<script src="static/moment.zh-cn.js"></script>
<script src="static/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
	$(function() {

        $('#user_adddate').datetimepicker({
            "format":"YYYY-MM-DD HH:mm:ss"
		});

//		$.get("test/indexurl",function(data){
//			//position:fixed;bottom:0;left: 0; z-index:99999 ;
//			$('#qr').popover({
//				title:"扫一扫",
//				content:"<img src='test/qr?width=200&height=200&param="+data+"&r=51&g=0&b=51' style='width:100px;height:100px;' alt='扫一扫访问'>",
//				html:true,
//				placement:"bottom",
//				trigger:"hover"
//			});
//		});
		$.getJSON('user/newdata.json', function(data) {
			$("#xinzeng").text(data.newcount);
			$("#xinzeng").tooltip({
				"title" : "今日新增数据，点击查看",
				"placement" : "bottom"
			});
			$("#xinzeng").mouseover();
			$(".login_username").text(data.username);
			$.getJSON('user/datacount', function(data) {
				var myChart = echarts.init(document
						.getElementById('echarts_test'));
				var option = {
					title : {
						text : '用户注册统计',
						subtext : "时间分组统计",
						subtextStyle : {
							fontSize : 15,
							fontWeight : 'bold',
							color : 'black'
						}
					},
					tooltip : {
						show : true
					},
					legend : {
						data : [ '注册数' ]
					},
					color : '#61a0a8',
					axisType : 'category',
					xAxis : {
						position : "top",
						axisLabel : {
							formatter : function(value) {
								return value + "个";
							}
						}
					},
					yAxis : [ {
						data : data.c
					} ],
					series : [ {
						"name" : "注册数",
						"type" : "bar",
						"data" : data.d,
						itemStyle : {
							normal : {
								color : 'orange'
							}
						},
						label : {
							normal : {
								show : true,
								position : 'right',
								formatter : function(obj) {
									if (obj.value > 0) {
										return obj.value + "个";
									} else {
										return "暂无数据";
									}
								}
							}
						}
					} ]
				};
				// 为echarts对象加载数据 
				myChart.setOption(option);
				
				
				var myChart2 = echarts.init(document
						.getElementById('echarts_test2'));
				var option2 = {
					title : {
						text : '用户注册统计',
						subtext : "时间分组统计",
						subtextStyle : {
							fontSize : 15,
							fontWeight : 'bold',
							color : 'black'
						}
					},
					tooltip : {
						show : true
					},
					legend : {
						data : [ '注册数' ]
					},
					color : '#61a0a8',
					axisType : 'category',
					xAxis : {
						position : "top",
						data : data.c,
						axisLabel : {
							formatter : function(value) {
								return value + "时间段";
							}
						}
					},
					yAxis : [ {
						type:"value"
					} ],
					series : [ {
						"name" : "注册数",
						"type" : "bar",
						"data" : data.d,
						itemStyle : {
							normal : {
								color : 'orange'
							}
						},
						label : {
							normal : {
								show : true,
								position : 'top',
								formatter : function(obj) {
									if (obj.value > 0) {
										return obj.value + "个";
									} else {
										return "暂无数据";
									}
								}
							}
						}
					} ]
				};
				// 为echarts对象加载数据 
				myChart2.setOption(option2);
			});

		});
	});

	function operateFormatter(value, row, index) {
		return [
				'<a class="edit ml10" style="color:black;" href="javascript:void(0)" title="编辑">',
				'<span class="glyphicon glyphicon-edit"></span>',
				'</a>&emsp;',
				'<a class="remove ml10" style="color:black;" href="javascript:void(0)" title="删除">',
				'<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
	}

	function hideIdFormatter(value, row, index) {
		return "<input type='hidden' value="+value+" name='id' />";
	}

	window.operateEvents = {
		'click .like' : function(e, value, row, index) {
			alert('You click like icon, row: ' + JSON.stringify(row));
			console.log(value, row, index);
		},
		'click .edit' : function(e, value, row, index) {
			clear_user_form();
			console.log("row:%o",row);
		    $("#user_edit_form input[name='name']").attr("placeholder",row.name);
            $("#user_edit_form input[name='name']").val(row.name);
            $("#user_edit_form input[name='age']").attr("placeholder",row.age);
            $("#user_edit_form input[name='age']").val(row.age);
			if(row.card!=null){
				$("#user_edit_form input[name='card.cardNo']").val(row.card.cardNo);
			}
            $("#user_edit_form input[type='radio'][name='sex'][value='"+row.sex+"']").attr("checked",'checked');
            $("#user_edit_form input[name='adddate']").attr("placeholder",moment(moment.unix(row.adddate)).format('YYYY-MM-DD HH:mm:ss'));
			$("#waituserid").val(row.id);
			$("#edituc").modal("show");
		},
		'click .remove' : function(e, value, row, index) {
			//alert('You click remove icon, row: ' + JSON.stringify(row));
			var delid = $("[data-index=" + index + "]").find('td').eq(0)
					.children().first().val();
			bootbox.confirm("确定删除该条记录吗？", function(result) {
				if(result){
				  $.getJSON('user/delete', {
						"id" : delid
					}, function(data) {
						$("#dtb").bootstrapTable('refresh');
					});
				}else{
					bootbox.alert("操作取消");
				}
			}); 
// 			if (confirm("确定删除该条记录吗？" + delid)) {
// 				$.getJSON('user/delete', {
// 					"id" : delid
// 				}, function(data) {
// 					$("#dtb").bootstrapTable('refresh');
// 				});
// 			}
			console.log(value, row, index);
		}
	};

	function refreshTable() {
		$("table").bootstrapTable('refresh', {
			url : $("table").attr('data-url')
		});
	}

	function makeparmter(params) {
		params.queryby = $("#queryby").val();
		var ret = '';
		for ( var i in params) {
			ret += i + ':' + params[i];
		}
		//alert(ret);
		return params;
	}

	function saveUser() {
	    var sex=$("#user_edit_form input[name='sex']:checked").val();
	    $.ajax({
	        url:"user",
			data:{
            	"id" : $("#waituserid").val(),
				"name" : $("#user_edit_form input[name='name']").val(),
				"age":$("#user_edit_form input[name='age']").val(),
				"sex":sex==""?"男":sex,
				"card.userId":$("#waituserid").val(),
				"card.cardNo":$("#user_edit_form input[name='card.cardNo']").val(),
				"adddate":$("#user_edit_form input[name='adddate']").val(),//使用springmvc自定义类型转换器StringToTimestampConverter
				"_method":"PUT"
            },
//			data:$("#user_edit_form").serialize(),
			type:"post",
			success:function (data) {
	            if(data.success){
					$("#edituc").modal('hide');
					clear_user_form();
					refreshTable();
				}else {
                    bootbox.alert(JSON.stringify(data));
				}
            }
		});
	}

	function clear_user_form() {
		$(':input','#user_edit_form')
		.not(':button, :submit, :reset,:radio')
		.val('')
		.removeAttr('checked')
		.removeAttr('selected');
	}

	function checkToday() {
		$("#queryby").val('0');
		refreshTable();
	}

	function checkAll() {
		$("#queryby").val('1');
		refreshTable();
	}

	function sys_Exit() {
		bootbox.confirm("确定退出系统吗？", function(result) {
			if(result){
				window.location.href = "exit";
			}
		}); 
// 		if (confirm("确定退出系统吗")) {
// 			window.location.href = "exit";
// 		}
	}
	function exporyToday() {
		if (confirm("确定导出当天记录吗？")) {
			window.location.href = "user/export";
		}
	}
	function exporyAll() {
		if (confirm("确定导出所有记录吗？")) {
			window.location.href = "export";
		}
	}
	
	function dateFormatter(value, row, index) {
		return moment.unix(value).format("YYYY-MM-DD hh:mm:ss a");
	}
</script>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">spring-boot-bootstrap-table-demo</a>
			</div>

			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class=""><a href="demo" target="_blank">Demo <span class="sr-only">(current)</span></a></li>
					<li id="qr"><a href="#">扫码访问</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">Separated link</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">One more separated link</a></li>
						</ul>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li class="visible-xs-block">
						<a href="#">欢迎您：<span class="login_username"></span></a>
					</li>
					<li class="hidden-xs">
						<p class="navbar-text">
							<span class="glyphicon glyphicon-user"></span> 欢迎您：<span
								class="login_username"></span>
						</p>
					</li>
					<li class="hidden-xs">
						<p class="navbar-text">
							今日共新增<span class="badge" id="xinzeng" style="cursor: pointer;"
								onclick="checkToday();">0</span>条数据
						</p>
					</li>
					<li><a href="#" id="sys_exit" onclick="sys_Exit();"><span
							class="glyphicon glyphicon-off"></span>退出系统</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container-fluid">
		<hr><br/>
		<!-- 常用安全色http://www.bootcss.com/p/websafecolors/ -->
		<div class="row">
			<div id="echarts_test" style="height: 200px;" class="col-md-12"></div>
		</div>
		<div class="row">
			<div id="echarts_test2" style="height: 200px;" class="col-md-12"></div>
		</div>
		<!-- <div class="btn-group btn-group-justified" role="group"
			aria-label="...">
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default"
					onclick="checkToday();">
					<span class="glyphicon glyphicon-search"></span> 查询今日数据
				</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default" onclick="checkAll();">
					<span class="glyphicon glyphicon-hdd"></span> 查询所有数据
				</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-default"
					onclick="exporyToday();">
					<span class="glyphicon glyphicon-arrow-down"></span> 导出今日数据到excel
				</button>
			</div>
		</div> -->
		<button type="button" class="btn btn-default" onclick="exporyAll();">
			<span class="glyphicon glyphicon-arrow-down"></span> 导出历史数据到excel
		</button>
		<!--<p class="text-center text-success">支持中文首字母查询</p>-->
		<!-- data-page-size设定分页大小 -->
		<table id="dtb" data-toggle="table"
			data-url="user/userlist.json" class="table table-hover"
			data-show-columns="true" data-search="true" data-show-refresh="true"
			data-show-toggle="true" data-show-export="true"
			data-page-size="50" 
			data-export-types="['json', 'xml', 'csv', 'txt', 'sql', 'excel']"
			data-height="450" data-side-pagination="server"
			data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]"
			data-query-params="makeparmter"
		    data-sort-name="adddate"
		    data-sort-order="desc">
			<thead>
				<tr>
					<th data-field="id" data-formatter="hideIdFormatter" class="hide"></th>
					<th data-field="name" data-align="left">姓名</th>
					<th data-field="sex" data-align="center">性别</th>
					<th data-field="age">年龄</th>
					<th data-field="phone">手机号</th>
					<th data-field="deliveryaddress">收货地址</th>
					<th data-field="adddate" data-formatter="dateFormatter" data-sortable="true">添加时间</th>
					<th data-field="operate" data-formatter="operateFormatter"
						data-events="operateEvents">操作</th>
				</tr>
			</thead>
		</table>

		<div class="modal fade" id="edituc" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">编辑当前用户的资料</h4>
					</div>
					<div class="modal-body">
						<form role="form" onsubmit="return false" id="user_edit_form">
							<div class="form-group">
								<label for="user_name">用户名</label>
								<input id="user_name" type="text" name="name" class="form-control" value="" placeholder="请输入姓名" required="required" />
							</div>
							<div class="form-group">
								<label for="age">年龄</label>
								<input type="number" class="form-control" name="age" id="age" placeholder="请输入年龄">
							</div>
							<div class="form-group">
								<label for="age">性别</label>&emsp;
								<label class="radio-inline">
									<input type="radio" name="sex" id="inlineRadio1" value="男"> 男
								</label>
								<label class="radio-inline">
									<input type="radio" name="sex" id="inlineRadio2" value="女"> 女
								</label>
							</div>
							<div class="form-group">
								<label for="card.cardNo">卡号</label>
								<input type="text" class="form-control" name="card.cardNo" id="card.cardNo" placeholder="请输入卡号">
							</div>
							<div class="form-group">
								<label for="user_adddate">添加时间</label>
								<div class='input-group date' id='user_adddate'>
									<input type='text' name="adddate" class="form-control" />
									<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span>
								</div>
							</div>
							<input id="waituserid" type="hidden" />
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary"
							onclick="saveUser();">保存</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="xinzengrows" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">今日新增的用户数据</h4>
					</div>
					<div class="modal-body">
						<table class="table">

						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
</html>
